<template>
        <div class="dialogVue">
            <div class="showVue flex_between">
                <div class="show flex_center align_center">
                    <span>发送进度：{{info.success || 0}}/{{info.count || 0}}</span>
                    <span>发送失败：{{info.fail || 0}}人</span>
                </div>
                <div class="show flex_center align_center">
                    <span>回复：{{info.reply || 0}}</span>
                    <span>回复率：{{info.replyPercent || "0%"}}</span>
                </div>
            </div>
            <div class="tabVue flex">
                <div class="tab" :class="{active: current===1}" @click="changeCurrent(1)">发送成功</div>
                <div class="tab" :class="{active: current===-1}" @click="changeCurrent(-1)">发送失败</div>
                <div class="tab" :class="{active: current===0}" @click="changeCurrent(0)">进行中</div>
            </div>

            <div class="listVue relative">
                <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                </div>
                <template v-if="current===1">
                    <div class="thVue flex">   
                        <div class="li flex_center align_center" style="width: 80px; line-height: 40px;">
                            <img src="../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="isCurrentPage"  @click="cancelCurrentPage">
                            <img src="../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectCurrentPage">
                            <span style="font-weight: 600; padding-left: 5px;">当前页</span>
                        </div>     
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">好友</div>
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">回复情况</div>
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">接收时间</div>
                        <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">管理</div>      
                    </div>
                    <div class="tdContent">
                        <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                            <div class="li" style="width: 80px; line-height: 50px; padding-left: 7px;">
                                <img src="../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="JSON.stringify($store.state.selectList).includes(JSON.stringify(item))" @click="removeFun(item)">
                                <img src="../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectFun(item)">
                            </div>
                            <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">{{ item.typeStr==="好友" ? item.friendWechatName : item.groupName }}</div>
                            <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">{{ item.reply===0?"未回复":"已回复" }}</div>
                            <div class="li" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">{{ formatTimeFun(item.sendTime/1000) }}</div>
                            <div class="li flex_center align_center" style="width: 200px;">
                                <el-button size="mini" type="show" @click="toChat(item)">查看聊天</el-button>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current===-1">
                    <div class="thVue flex">   
                        <div class="li flex_center align_center" style="width: 80px; line-height: 40px;">
                            <img src="../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="isCurrentPage"  @click="cancelCurrentPage">
                            <img src="../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectCurrentPage">
                            <span style="font-weight: 600; padding-left: 5px;">当前页</span>
                        </div>     
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">好友</div>
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">发送状态</div>
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">原因</div>
                        <div class="li" style="width: 200px; line-height: 40px; text-align: center; font-weight: 600;">管理</div>      
                    </div>
                    <div class="tdContent">
                        <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                            <div class="li" style="width: 80px; line-height: 50px; padding-left: 7px;">
                                <img src="../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="JSON.stringify($store.state.selectList).includes(JSON.stringify(item))" @click="removeFun(item)">
                                <img src="../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectFun(item)">
                            </div>
                            <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">{{ item.friendWechatName }}</div>
                            <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">发送失败</div>
                            <div class="li" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">{{ item.failedCause }}</div>
                            <div class="li flex_center align_center" style="width: 200px;">
                                <el-button size="mini" type="show" @click="reSend(item.id)">重新发送</el-button>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current===0">
                    <div class="thVue flex">   
                        <div class="li flex_center align_center" style="width: 80px; line-height: 40px;">
                            <img src="../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="isCurrentPage"  @click="cancelCurrentPage">
                            <img src="../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectCurrentPage">
                            <span style="font-weight: 600; padding-left: 5px;">当前页</span>
                        </div>     
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">好友</div>
                        <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">发送状态</div>   
                    </div>
                    <div class="tdContent">
                        <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                            <div class="li" style="width: 80px; line-height: 50px; padding-left: 7px;">
                                <img src="../../assets/S2.png" style="width: 20px; height: 20px; cursor: pointer;" v-if="JSON.stringify($store.state.selectList).includes(JSON.stringify(item))" @click="removeFun(item)">
                                <img src="../../assets/S1.png" style="width: 20px; height: 20px; cursor: pointer;" v-else  @click="selectFun(item)">
                            </div>
                            <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">{{ item.friendWechatName }}</div>
                            <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;">进行中</div>
                        </div>
                    </div>
                </template>
                <!-- 底部 -->
                <div class="botVue flex_between align_center">
                    <div class="allBtn" v-if="isAll" @click="$store.state.selectList = []; isAll = false; isCurrentPage = false">清空已选择</div>
                    <div class="allBtn" v-else  @click="selectAll">选择所有好友</div>
                    <div class="paginationVue flex_center align_center">
                        <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize"  @current-change="handlePageChange"></el-pagination>
                    </div>
                    <div class="flex">
                        <div class="btn" style="width: 80px; margin-right: 10px;" :class="{active: $store.state.selectList.length>0}" @click="categoryDialog=true; $refs.categoryRef.getCategoryList()">添加分组</div>
                        <div class="btn" v-if="current===-1 && list.length>0" style="width: 80px; background: #0147fd; margin-right: 10px;" @click="reSendSelect">一键重发</div>
                        <div class="btn" :class="{active: $store.state.selectList.length>0}" @click="toSend" v-if="current!=-1">创建新的群发任务</div>
                        <div class="btn" v-if="current===0 && info.status!=6 && list.length>0" style="width: 100px; background: #0147fd; margin-left: 10px;" @click="stopFun">暂停发送任务</div>
                    </div> 
                </div>
            </div>

            <copyVue :dialogTableVisible="copyDialog" @beforeClose="copyDialog=false; isAll = false; isCurrentPage = false;" :selectList="$store.state.selectList" @callback="$store.state.selectList=[]; isAll = false; isCurrentPage = false;"></copyVue>
            <categoryVue :dialogTableVisible="categoryDialog" @beforeClose="categoryDialog=false" ref="categoryRef"></categoryVue>
        </div> 
</template>

<script>
import { toast, formatTime } from '@/common/tools'
import copyVue from "./components/copy.vue"  
import categoryVue from './components/category.vue'
export default {
    data(){
        return {
            current: 1,
            pageSize: 30,
            pageNum: 1,
            list: [],
            total: 0,
            isAll: false,
            id: "",
            allList: [],
            copyDialog: false,
            isCurrentPage: false,
            canAll: false,
            taskWeChatName: "",
            taskWeChatId: "",
            info: {
                count: 0,
                fail: 0,
                success: 0,
                reply: 0,
                replyPercent: "0%"
            },
            isEmpty: false,
            categoryDialog: false
        }
    },

    components: {
        copyVue,
        categoryVue
    },

    created(){
        this.getList()
        this.getAllList()
        this.getInfo()
    },

    beforeDestroy(){
        this.$store.state.selectList = []
        this.isAll = false
        this.isCurrentPage = false
    },

    methods: {
        changeCurrent(e){
            if(this.current===e) return
            this.current = e
            this.$store.state.selectList = []
            this.getList()
            this.getAllList()
        },

        formatTimeFun(value){
            if(!value) return
            return formatTime(value*1000, "YMDHMS")
        },


        // 单个选择好友
        selectFun(item){
            this.$store.state.selectList.push(item)
            this.isCurrentPageFun()
        },

        // 全选当前页
        selectCurrentPage(){
            this.isCurrentPage = true
            for(let i=0; i<this.list.length; i++){
                if(!JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(this.list[i]))) {
                    this.$store.state.selectList.push(this.list[i])
                }
            }
        },

        // 移除选择好友
        removeFun(item){
            this.isAll = false
            this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                return item.id != o.id
            })
            this.isCurrentPageFun()
        },

        // 取消全选当前页
        cancelCurrentPage(){
            this.isCurrentPage = false
            for(let i=0; i<this.list.length; i++){
                this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                    return this.list[i].id != o.id
                })
            }
        },

        // 判断当前页是否全选
        isCurrentPageFun(){
            if(this.list.length===0) return this.isCurrentPage = false
            for(let i=0; i<this.list.length; i++) {
                if(!JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(this.list[i]))) {
                    this.isCurrentPage = false
                    return 
                }
            }
            this.isCurrentPage = true
        },

        selectAll(){
            if(!this.canAll) return toast(1, "正在加载所有好友，请稍后重试")
            if(this.allList.length===0) return
            this.isAll = true
            this.isCurrentPage = true
            this.$store.state.selectList = this.allList
        },
        
        reSendSelect(){
            if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个重新发送对象")
            let array = []
            for(let i=0; i<this.$store.state.selectList.length;i++) {
                array.push(this.$store.state.selectList[i].id)
            }
            this.$post("/front/timing/resend", {
                ids: array
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "重发成功")
                    this.getList()
                }else{
                    toast(1,res.data.msg)
                }
            })
        },

        // 重新发送
        reSend(id){
            this.$post("/front/timing/resend", {
                ids: [id]
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "重发成功")
                    this.getList()
                }else{
                    toast(1,res.data.msg)
                }
            })
        },

        // 暂停发送
        stopFun(){
            this.$post("/front/timing/suspend", {
                id: this.$route.query.id
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "暂停成功")
                    this.getList()
                    this.getInfo()
                }else{
                    toast(1,res.data.msg)
                }
            })
        },

        toChat(item){
            this.$post("/front/wechat/friend/wechatFriend", { id: item.receiverId  }).then(res=>{
                if(res.data.code===0) {
                    this.$store.state.currentChat = res.data.obj
                    console.log(res)
                }
            })
            let obj = item
            obj.id = item.receiverId
            this.$store.state.currentChat = obj
            this.$parent.defaultActive = "chatting"
            this.$store.state.history = []
            this.$router.push({name: "chatting", query: {
                key: item.type=== 0 ? item.friendWechatName : item.groupName,
            }})
        },

        // 获取发送对象列表
        getList(){
            this.$post("/front/timing/selectFriendSendStatusList", {
                taskId: this.$route.query.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: this.current
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                    this.isEmpty = this.total===0
                    this.isCurrentPageFun()
                }
            })
        },

        getInfo(){
            this.$post("/front/timing/massSendingDetail", {
                id: this.$route.query.id,
            }).then(res=>{
                if(res.data.code===0) {
                    this.info = res.data.obj
                    console.log(this.info)
                }
            })
        },

        //一次性获取所有
        getAllList(){
            this.$post("/front/timing/selectFriendSendStatusList", {
                taskId: this.$route.query.id,
                pageNum: 1,
                pageSize: 10000,
                status: this.current
            }).then(res=>{
                if(res.data.code===0) {
                    this.allList = res.data.obj.list
                    this.canAll = true
                }
            })
        },

        toSend(){
            if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个发送对象")
            console.log(this.$store.state.selectList)
            this.copyDialog = true
        },

        handlePageChange(val){
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList(this.id)
        },
    }
 }
 </script>

<style lang="less" scoped>
:deep(.el-button--show) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
.dialogVue {
    width: 100%;
    height: 100%;
    padding: 15px 15px 0;
    .showVue {
        width: 100%;
        height: 50px;
        .show {
            width: 49%;
            height: 50px;
            background: #f5f5f5;
            span {
                padding: 0 8px;
            }
        }
    }
    .tabVue {
        width: 450px;
        height: 40px;
        margin-top: 10px;
        .tab {
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            text-align: center;
            background: #f5f5f5;
            color: #333;
            cursor: pointer;
        }
        .tab:nth-child(1) {
            border-radius: 4px 0 0 4px;
        }
        .tab:nth-child(3) {
            border-radius: 0 4px 4px 0;
        }
        .active {
            background: #0147fd;
            color: #fff;
        }
    }

    .listVue {
        width: 100%;
        height: calc(100% - 170px);
        margin-top: 10px;
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(100% - 40px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }     
    }
    .botVue {
        width: 100%;
        height: 60px;
        .allBtn {
            width: 100px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: #0147fd;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            margin-left: 10px;
        }
        .btn {
            width: 130px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            background: #AAA;
            border-radius: 4px;
            font-size: 13px;
        }
        .active {
            background: #0147fd;
        }
    }
}
 </style>